<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">
    <!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>头像选择</title>
    <script type="text/javascript" src="./../../../static/js/include/_include-css.js"></script>
    <link href="./../../../static/plugins/cropper/css/cropper.css" rel="stylesheet" />
</head>

<body class="bg-white">
    <div class="wrapper">
        <div class="wrapper-container">
            <div class="row">
                <div class="col-xs-8">
                    <div class="cropper-image-box">
                        <img id="image" src="./../../../static/img/banner/5.jpg">
                    </div>
                    <div class="cropper-image-tools">
                        <label class="btn btn-sm btn-primary" for="select_image">
                            <input type="file" name="file" id="select_image" class="cropper-image-file"
                                onchange="selectImage(this)" accept=".jpg,.jpeg,.png,.gif,.bmp,.tiff">
                            <span>选择图片</span>
                        </label>
                        <button id="addZoom" class="btn btn-sm btn-primary"><i class="fa fa-plus"></i></button>
                        <button id="reduceZoom" class="btn btn-sm btn-primary"><i class="fa fa-minus"></i></button>
                        <button id="rotateLeft" class="btn btn-sm btn-primary"><i
                                class="fa fa-rotate-left"></i></button>
                        <button id="rotateRight" class="btn btn-sm btn-primary"><i
                                class="fa fa-rotate-right"></i></button>
                        <button id="reset" class="btn btn-sm btn-primary"><i class="fa fa-refresh"></i></button>
                    </div>
                </div>
                <div class="col-xs-4">
                    <div class="cropper-preview-box"></div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="./../../../static/js/include/_include-js.js"></script>
    <script type="text/javascript" src="./../../../static/plugins/cropper/js/cropper.js"></script>
    <script type="text/javascript" src="./../../../static/plugins/cropper/js/jquery-cropper.js"></script>
    <script type="text/javascript">
        $("#image").cropper({
            aspectRatio: 1 / 1,//默认比例
            preview: '.cropper-preview-box'
        });
        $("#addZoom").click(function () {
            if ($("#image").attr("src") != null) {
                $("#image").cropper('zoom', 0.1);
            }
        });
        $("#reduceZoom").click(function () {
            if ($("#image").attr("src") != null) {
                $("#image").cropper('zoom', -0.1);
            }
        });
        $("#rotateLeft").click(function () {
            if ($("#image").attr("src") != null) {
                $("#image").cropper('rotate', -45);
            }
        });
        $("#rotateRight").click(function () {
            if ($("#image").attr("src") != null) {
                $("#image").cropper('rotate', 45);
            }
        });
        $("#reset").click(function () {
            if ($("#image").attr("src") != null) {
                $("#image").cropper('reset');
            }
        });

        //将base64转换为Blob文件
        function data2blob(data, mime) {
            data = data.split(',')[1];
            data = window.atob(data);
            var ia = new Uint8Array(data.length);
            for (var i = 0; i < data.length; i++) {
                ia[i] = data.charCodeAt(i);
            }
            ;
            return new Blob([ia], {
                type: mime
            });
        }

        function selectImage(file) {
            if (!file.files || !file.files[0]) {
                return false;
            }
            var imageFile = file.files[0];
            if (/^image\/\w+$/.test(imageFile.type)) {
                var reader = new FileReader();
                reader.onload = function (evt) {
                    var replaceSrc = evt.target.result;
                    $("#image").cropper('replace', replaceSrc, false);
                }
                reader.readAsDataURL(imageFile);
            } else {
                $.modal.alert('请选择图片文件上传');
                return false;
            }

        }
    </script>
</body>

</html>